import type { ResponseData } from '@/api/type'
import { clearAdminToken, getToken, getUser, removeAdmin } from '@/utils/admin'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/login',
    component: () => import('@/views/Login/Login.vue'), //路由懒加载
    name: '登录注册页面',
  },
  {
    path: '/',
    component: () => import('@/layout/index.vue'),
    name: '布局',
    children: [
      {
        path: '/',
        component: () => import('@/views/Index.vue'),
        name: '首页',
      },
      // 用户管理
      {
        path: '/admin',
        component: () => import('@/views/user/Admin.vue'),
        name: '管理员信息',
      },
      {
        path: '/consumer',
        component: () => import('@/views/user/Consumer.vue'),
        name: '用户信息',
      },
      // music管理
      {
        path: '/singer',
        component: () => import('@/views/music/Singer.vue'),
        name: '歌手信息',
      },
      {
        path: '/song',
        component: () => import('@/views/music/Song.vue'),
        name: '歌曲信息',
      },
      {
        path: '/songList',
        component: () => import('@/views/music/SongList.vue'),
        name: '歌单信息',
      },
      {
        path: '/songList2Song',
        component: () => import('@/views/music/SongList2Song.vue'),
        name: '歌单歌曲信息',
      },
      // 信息管理
      {
        path: '/banner',
        component: () => import('@/views/information/Banner.vue'),
        name: '轮播图管理',
      },
      {
        path: '/comment',
        component: () => import('@/views/information/Comment.vue'),
        name: '评论管理',
      },
      {
        path: '/collect',
        component: () => import('@/views/information/Collect.vue'),
        name: '收藏管理',
      },
      {
        path: '/rankList',
        component: () => import('@/views/information/RankList.vue'),
        name: '评分管理',
      },
      // 商品管理
      {
        path: '/product',
        component: () => import('@/views/shop/Product.vue'),
        name: '商品管理',
      },
      {
        path: '/order',
        component: () => import('@/views/shop/Order.vue'),
        name: '订单管理',
      },
      // 系统管理
      {
        path: '/notice',
        component: () => import('@/views/system/Notice.vue'),
        name: '公告信息',
      },
      {
        path: '/feedback',
        component: () => import('@/views/system/Feedback.vue'),
        name: '反馈信息',
      },
      {
        path: '/address',
        component: () => import('@/views/system/Address.vue'),
        name: '地址信息',
      },
      {
        path: '/log',
        component: () => import('@/views/system/Log.vue'),
        name: '日志信息',
      },
      {
        path: '/changePwd',
        component: () => import('@/views/Login/ChangePwd.vue'),
        name: '修改密码',
      },
      {
        path: '/space',
        component: () => import('@/views/Login/AdminSpace.vue'),
        name: '个人中心',
      },
    ],
  },
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})

// 全局前置路由守卫
// next():控制路由跳转
// return:结束函数，但不影响路由跳转
// return false:结束函数且阻止路由跳转，停止导航
// 推荐使用 return next()

// Important1注：要保证每次请求只调用路由守卫的next一次

router.beforeEach(async (to, from, next) => {
  const user = getUser()
  // console.log('user:',user)

  // web管理【用于检测token是否失效】
  if (user && to.path !== '/login') {
    // 这里不能用api，否则请求出错【token失效】的code=-1,则由request的响应拦截器同一处理而不会重定向到login页了
    // let res = await webApi()
    // if(res.code==='0'){
    //   next()
    //   return
    // }else {
    //   removeAdmin()
    //   next('/login')
    // }
    // 利用原始方式发送请求

    // 此处的await不可省！！！！
    // console.log('token:', getToken())
    // console.log('user:', user)
    await axios
      .get<any, any>('http://localhost:8080/api/web', {
        headers: {
          'Content-Type': 'application/json;charset=utf-8',
          token: getToken(),
          code: 'admin',
        },
      })
      .then((res) => {
        // console.log('web响应回来的对象res:',res)
        if (res.data.code === '0') {
          next()
        } else {
          // console.log('token失效')
          ElMessage.warning('登录过期，请重新登录')
          // removeAdmin()
          clearAdminToken()
          // console.log('执行5')
          next('/login')
          // Important2细节：JS中的return只会退出当前函数【then的回调函数】，不会影响外层的同步流程，最后的执行7还是会执行
        }
      })
      .catch((err) => {
        // console.log('web请求出错信息',err)
        // console.log('执行6')
        next('/login')
      })
    return //终止此次路由守卫
  }

  // 规定歌曲管理员role=1只能访问首页+music管理信息的几个页面,role=0的超级管理员可以访问全部页面
  // 已登录状态
  if (user) {
    // 歌曲管理员
    if (user.role === '1') {
      if (to.path == '/' || to.path == '/singer' || to.path == '/song' || to.path == '/songList' || to.path == '/songList2Song') {
        // console.log('执行1')
        return next() //放行
      } else {
        // console.log('执行2')
        alert('没有权限访问')
        return next(from.path)
      }
    }
  }

  // 如果未登录访问其他页面，重定向到登录注册页
  if (!user && to.path !== '/login') {
    ElMessage.warning('请先登录')
    // console.log('执行3')
    return next('/login')
  }

  // 如果直接访问的登录注册页则放行
  if (to.path == '/login') {
    // console.log('执行4')
    return next()
  }

  // Important3此处由于上述的异步请求，当1~4都未执行的情况下，若异步请求未加await，则此处优先于上述的异步请求导致程序异常
  // console.log('执行7')
  next()
})

export default router
